<template>
    <div class="home" >
        <div class="turnClass">
            <div id="flipbook" class="flipbookClass" ref="flipbookref">

                <div v-for="(item) in imgUrlOne" :key="item.index" class="flipbook__item"
                     :style="`background-image:url(${item.imgurl})`">
                </div>

                <div class="flipbook__item" v-for="(item) in videoImg"   :style="`background-image:url(${item.imgurl})`">
                    <video :src="item.video" :poster="item.poster" class="item__11" controls preload  :ref="'ref' + item.index"></video>
                </div>

                <img  :src="lastImgUrl" class="flipbook__img"/>
            </div>

            <div class="bookpage">
                <div class="bookpage__num">
                    <div class="page__start" @click="toStartPage"/>
                    <div class="page__prev" @click="pred"/>
                    <div class="page__num">{{currentPage}}/{{pages}}</div>
                    <div class="page__next" @click="next"/>
                    <div class="page__end"  @click="toEndPage"/>
                </div>
            </div>

        </div>


        <!--        遮罩-->
        <div class="mask" v-show="isMask">
            <img  id="load1" alt=""  src="../assets/img/load.gif" class="mask__load"/>
        </div>
    </div>
</template>

<script>
    import {zoomElement} from '@/utils/zoom.js';
    import turn from '@/utils/turn'
    export default {
        name: "TurnPage", //翻页
        data(){
            return {
                timer: null, // 定时器
                isMask:true, //显示遮罩
                sysWidth:0,
                sysHeight:0,
                pages:6,//共多少页
                currentPage:1,//当前页
                imgUrlOne:[
                    {imgurl: require('../assets/img/1.jpg'),index:1}, //首页
                    {imgurl: require('../assets/img/2.jpg'),index:2},
                    {imgurl: require('../assets/img/3.jpg'),index:3},
                    {imgurl: require('../assets/img/4.jpg'),index:4},
                ],
                lastImgUrl:require('../assets/img/6.jpg'), //最后一页
                videoImg:[ //index ref 相关 不要随意更改
                    {imgurl: require('../assets/img/5.jpg'),index:5,video: require('../assets/video/5.mp4'),poster: require('../assets/img/5.jpg')},
                ],
            }
        },
        created(){
            this.getSystem();
            this.setWidthHeigth();
        },
        mounted(){
            const that = this;
            // 监听 resize 方法
            window.addEventListener("resize", that.renderResize, false);

            that.onTurn();

            that.timer = setInterval(function () {
                console.log("document.readyState===2",document.readyState)
                if (document.readyState === 'complete') {
                    that.isMask = false;
                    window.clearInterval(that.timer)

                    //获取需要缩放的dom元素
                    let zoomEl = that.$refs.flipbookref;
                    console.log("zoomEl:"+zoomEl);
                    zoomElement(zoomEl);
                }
            }, 2000);
        },
        beforeDestroy () {
            var that =this;
            // 移除监听
            window.removeEventListener("resize", that.renderResize, false)
        },
        methods:{

            renderResize() {
                var that = this;
                that.getSystem();
                that.setWidthHeigth();
                that.$nextTick(() => {
                    $("#flipbook").height(that.sysHeight);
                    $("#flipbook").width(that.sysWidth);
                    that.$forceUpdate;
                });

                // 做页面适配
                // 注意：renderResize 方法执行时虚拟 dom 尚未渲染挂载，如果要操作 vue 实例，最好在this.$nextTick()里进行。
            },

            //设置翻页宽高
            setWidthHeigth(){
                var that = this;
                var num = 1.414 * that.sysWidth;
                var ableHeight = Math.floor(that.sysHeight) - 65;
                if (num < ableHeight) {
                    that.sysHeight = num;
                } else {
                    that.sysHeight = ableHeight;
                    that.sysWidth = Math.floor(that.sysHeight / 1.414);
                }
            },

            //获取系统信息 - 这个看需求，我这里希望手机看时候，翻页区域横向与显示屏大小一致
            getSystem(){
                var that = this;
                var u = navigator.userAgent;
                if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
                } else if (u.indexOf('iPhone') > -1) {//苹果手机
                    //屏蔽ios下上下弹性
                    $(window).on('scroll.elasticity', function (e) {
                        e.preventDefault();
                    }).on('touchmove.elasticity', function (e) {
                        e.preventDefault();
                    });
                } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
                }
                that.sysWidth = $(window).width();
                that.sysHeight = $(window).height();
            },


            //第一页
            toStartPage(){
                var that = this;
                $("#flipbook").turn("page",1);
                that.currentPage = 1;
            },
            //最后一页
            toEndPage(){
                var that = this;
                $("#flipbook").turn("page",that.pages );
                that.currentPage = that.pages;
            },
            //上一页
            pred(){
                var that = this;
                that.currentPage = $("#flipbook").turn("page");
                if (that.currentPage > 1) {
                    that.currentPage--;
                    $("#flipbook").turn('page', that.currentPage);
                } else {
                    //提示
                }
            },
            //下一页
            next(){
                var that = this;
                that.currentPage = $("#flipbook").turn("page");
                that.pages = $("#flipbook").turn("pages");
                if (that.currentPage < that.pages) {
                    that.currentPage++;
                    $("#flipbook").turn('page', that.currentPage);
                } else {
                    //提示
                }
            },

            onTurn(){
                var that = this;
                that.$nextTick(()=>{
                    $("#flipbook").turn({
                        acceleration: true, //启用硬件加速,移动端有效
                        display:"single", // 显示：single=单页，double=双页，默认双页
                        duration: 800, // 翻页速度，撒开鼠标，页面的延迟
                        page: 1, // 默认显示第几页
                        gradients: true, // 折叠处的光泽渐变，主要体现翻页的立体感、真实感
                        pages: $("#flipbook").children().length,
                        turnCorners: "bl,br,tl,tr,l.r", //翻页动画开始的起始位置bl,br （左下，右下）tl,tr（左上，右上） or bl,tr（左下，右上）
                        elevation: 300,
                        autoCenter: true,
                        peel:"tr",// 在右上角显示角
                        width:that.sysWidth,
                        height:that.sysHeight,
                        when: {
                            turning: function(event, page, view) {
                                that.currentPage = page;
                                if(page == 5){ //注意index 与 页面顺序
                                    that.$refs.ref5[0].pause(); // 翻页时视频暂停
                                }
                            },
                        },
                    });
                    $("#flipbook").bind("first", function(event) { //卷叶
                        console.log('当前页面是第一页');
                        $("#flipbook").turn("peel","tr"); // 右上
                    });
                    $("#flipbook").bind("last",function(event){
                        console.log('当前页面是最后一页');
                        $("#flipbook").turn("peel","bl"); //左下
                    });
                })

            }
        },
    }
</script>
<style lang="less" scoped>
    *{
        touch-action: pan-y; // 启用单指垂直平移手势 https://blog.csdn.net/weixin_44052136/article/details/113652466
    }

    .home{
        background-color: rgba(199,252,255,0.55);
        position:relative;
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0; //固定元素,不被挤压
        .turnClass{
            display: flex;
            flex-direction: column;
            align-items: center;
            .flipbookClass{
                position: relative;
                box-shadow: 5px 0px 5px 2px rgba(0, 0, 0, 0.16); // 阴影
                .flipbook__item{
                    background-repeat: no-repeat; // 不重复
                    background-size: cover; // 铺满
                    background-position: center center; //中心
                    transform-origin: 50% 50%;
                    .item__11{
                        border: 1px solid yellow;
                        background-color: rgba(144,141,162,0.55);
                        width: 72%;
                        height: 80%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0px;
                        margin: auto;
                    }
                    /*video::-webkit-media-controls-play-button {*/
                    /*    visibility: hidden;*/
                    /*}*/
                }
            }
            .bookpage{
                margin-top: 25px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                .bookpage__num{
                    display: flex;
                    align-items: center;
                    .page__start {
                        margin-right: 30px;
                        display: block;
                        border-top: 15px solid transparent;
                        border-bottom: 15px solid transparent;
                        border-right: 17px solid rgba(38,41,36,0.55);
                    }
                    .page__end {
                        margin-left: 30px;
                        display: block;
                        border-top: 15px solid transparent;
                        border-bottom: 15px solid transparent;
                        border-left: 17px solid rgba(38,41,36,0.55);
                    }
                    .page__prev{
                        width: 15px;
                        height: 15px;
                        border-bottom: 4px solid;
                        border-left: 4px solid;
                        border-color: rgba(38,41,36,0.55);
                        content: '';
                        transform: rotate(45deg);
                        margin-right: 32px;

                    }
                    .page__next{
                        margin-left: 32px;
                        width: 15px;
                        height: 15px;
                        border-top: 4px solid;
                        border-right: 4px solid;
                        border-color: rgba(38,41,36,0.55);
                        content: '';
                        transform: rotate(45deg);
                    }
                    .page__num{
                        width: 120px;
                        height: 36px;
                        border-radius: 20px;
                        border: 1px solid rgba(38,41,36,0.55);
                        background-color: rgba(38,41,36,0.2);
                        text-align: center;
                        line-height: 38px;
                        font-size: 26px;
                    }


                }
            }
        }

        .mask{
            z-index: 1000;
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100vh;
            width: 100vw;
            background-color: #BDE4E6;
            display: flex;
            justify-content: center;
            align-items: center;
            .mask__load{
                width: 300px;
                margin-bottom: 100px;
            }
        }
    }
</style>
